<template>
  <div class="content">
    <div class="bf">
      <router-link to="/category" class="shang">&lt;返回</router-link>
      <p>不凡</p>
    </div>
    <div class="sc">
      <img :src="imgsrc" alt="" />
      <input type="text" placeholder="商品搜索" @input="onInput" class="sou" />
      <router-link to="/category" class="no">取消</router-link>
    </div>

    <div class="hot">
      <p class="re">热门搜索</p>
      <div class="tags">
        <van-tag
          plain
          type="primary"
          v-for="item in hotKeywordList"
          :key="item.keyword"
          @click="addHistory(item)"
          >{{ item.keyword }}</van-tag
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  indexaction,
  helperaction,
  addhistoryaction,
  clearhistoryAction
} from "@/api/category/search/index.js";
export default {
  data() {
    return {
      historyDate: [],
      hotKeywordList: [],
      isShow: true,
      isKeywordList: false,
      imgsrc: require("../../../assets/img/icons/search.png")
    };
  },
  computed: {},
  async created() {
    var res = await indexaction({
      openId: "1231"
    });
    this.historyDate = res.historyDate;
    this.hotKeywordList = res.hotKeywordList;
    console.log(this.historyDate);
  },
  mounted() {},
  methods: {
    onInput(val) {
      console.log(val);
      helperaction({
        keyword: val,
        order: "desc"
      }).then(res => {
        console.log(res.keywords);
        this.keywordList = res.keywords;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.bf p {
  font-size: 14px;
  color: brown;
}
a {
  text-decoration: none;
  color: brown;
  font-size: 14px;
  position: absolute;
  left: 20px;
  top: 20px;
}
.span {
  margin-left: 20px;
}
.shang {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 15px;
  left: 30px;
}
.no {
  position: absolute;
  top: 80px;
  left: 320px;
}
.sc img {
  width: 10px;
  height: 10px;
  position: absolute;
  left: 30px;
  top: 85px;
}
.sou {
  width: 240px;
  height: 20px;
  margin-top: 30px;
}
.hot {
  width: 100%;
  height: 150px;
  background-color: burlywood;
}
.re {
  position: absolute;
  left: 20px;
}
</style>